<div>
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">添加电影信息</div>
        <div class="layui-card-div movieadd ">
          
   
			<form class="layui-form">
			  <div class="layui-form-item">
			    <label class="layui-form-label">电影名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="moviename" lay-verify="title" autocomplete="off"  class="layui-input">
			    </div>
			  </div>
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">电影简介</label>
			    <div class="layui-input-block">
			      <input type="text" name="description" lay-verify="title" autocomplete="off"  class="layui-input">
			     
			    </div>
			  </div>
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">封面图片</label>
			    <div class="layui-input-block">
			   	 <input  type="text" name="imgpath"  lay-verify="title" autocomplete="off" placeholder="" class="layui-input" style="padding-right: 80px;">
					<button v-on:click="openDialog2" style="position: absolute;top: 0;right: 6px;
					    cursor: pointer;" type="button" class="layui-btn">上传</button>
			   
			    </div>
			  </div>
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">票价</label>
			    <div class="layui-input-block">
			      <input type="text" name="ticketprice" lay-verify="title" autocomplete="off"  class="layui-input">
			    </div>
			  </div>
			  
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">导演</label>
			    <div class="layui-input-block">
			      <input type="text" name="director" lay-verify="title" autocomplete="off"  class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">时长</label>
			    <div class="layui-input-block">
			      <input type="text" name="time" lay-verify="title" autocomplete="off"  class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">语言</label>
					<div class="layui-input-block">
				       <select name="language" lay-verify="required" lay-search="">
				          <option value="中文">中文</option>
				          <option value="英语">英语</option>
				          <option value="日本语">日本语</option>
				          <option value="意大利语">意大利语</option>
				          <option value="俄罗斯语">俄罗斯语</option>
				          <option value="法语">法语</option>
	          			</select>
          			</div>
			  </div>
			   <div class="layui-form-item">
			    <label class="layui-form-label">上映日期</label>
			    <div class="layui-input-block">
			    <input type="text" name="publishdate" lay-verify="title" autocomplete="off"  class="layui-input">
			      <!-- <input type="text" name="publishdate" lay-verify="title" autocomplete="off"  class="layui-input" id="publishdateComponent"> -->
			    </div>
			  </div>
			   <div class="layui-form-item">
			    <label class="layui-form-label">票房（万元）</label>
			    <div class="layui-input-block">
			      <input type="number" name="boxoffice" lay-verify="title" autocomplete="off"  class="layui-input" >
			    </div>
			  </div>
			   <!-- <div class="layui-form-item">
			    <label class="layui-form-label">场次</label>
			    <div class="layui-input-block">
			      <input disabled value="{{sessionValue}}" type="text" name="session"  lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="padding-right: 80px;">
					<button v-on:click="openDialog1" style="position: absolute;top: 0;right: 6px;
					    cursor: pointer;" type="button" class="layui-btn">手动选择</button>
			    </div>
			  </div> -->
			  
			  <!-- <div class="layui-form-item">
			    <label class="layui-form-label">放映厅</label>
					<div class="layui-input-block">
				       <select name="vediohall" lay-verify="required" lay-search="">
				          <option value="1号厅">1号厅</option>
				          <option value="2号厅">2号厅</option>
				          <option value="3号厅">3号厅</option>
				          <option value="4号厅">4号厅</option>
				          <option value="5号厅">5号厅</option>
				          <option value="6号厅">6号厅</option>
	          			</select>
          			</div>
			  </div> -->
			  <div style="color:red;text-align:center;">{{errMsg}}</div>
			  
			  <div class="layui-form-item">
					<div class="layui-input-block" style="text-align:center;">
				       <button type="button" class="layui-btn" v-on:click="ajaxSubmit">提交</button>
				       <button type="button" class="layui-btn" v-on:click="back">返回</button>
          			</div>
			  </div>
			  
			</form>	 
			
			
			
			<div id="getSession" style="margin:20px;display:none;">
				<form class="layui-form" action="">
				<div class="layui-form-item">
				    <label class="layui-form-label">上映日期</label>
				    <div class="layui-input-block">
				      <input  type="text" name="publishdate" lay-verify="title" autocomplete="off"  class="layui-input" id="publishdateComponent2">
				    </div>
				  </div>
				  
				   <div class="layui-form-item">
				  <label class="layui-form-label">选择场次</label>
				   <div class="layui-input-block">
				  <select style="width:300px" name="session" lay-verify="required" lay-search="" id="sessionComponent">
			          <option value="7:30">7:30</option>
			          <option value="10:00">10:00</option>
			          <option value="14:30">14:30</option>
			          <option value="16:00">16:00</option>
			          <option value="19:30">19:30</option>
			          <option value="21:00">21:00</option>
			      </select>
			      </div>
			      </div> 
			      <div style="color:red;text-align:center;">{{errMsg2}}</div>
			      </form>
				 </div>
				 
				
			      
			      
			      <script src="/lay/modules/laydate.js"></script>
			      <script>
				      	layui.use('form', function(){
					  		
					  	});
					  	var laydate = layui.laydate;
					  	
					  	laydate.render({
					  	    elem: '#publishdateComponent2' //指定元素
					  	  	,done: function(value, date){ //监听日期被切换
						  	  	window.publishdateComponentValue = value;
						  	  }
					  	  });
			      </script>
			</div>
				  
         
        </div>
      </div>
    </div>
  </div>
</div>

</div>
<!-- 脚本 -->
<script src="/lay/modules/laydate.js"></script>

<script>

	function setImg(img){
		$("input[name='imgpath']").val(img);
	}

	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	
	var movieAdd = new Vue({
		el : '.movieadd' ,
		data : {
			fields : {
				'moviename' : '电影名称',
				'director' : '导演',
				'time' : '时长',
				'language' : '语言',
				'publishdate' : '发布日期',
				'boxoffice' : '票房',
				'ticketprice' : '票价',
				'session' : '场次',
				'vediohall' : '放映厅',
			},
			sessionValue : '',
			errMsg : '',
			errMsg2 : '',
			dataSource : [{
				
			}]
		} ,
		
		methods: {
			
			loadData : function(){
				
				window.id = layui.router().search.id;
				
				if(!id){
					return;
				}
				
				$.post("/movie/getById.do",{id:id},function(data){
					window.objForUpdate = {}
					$("input[name='time']").val(data.time);
					$("input[name='moviename']").val(data.moviename);
					$("input[name='description']").val(data.description);
					$("input[name='imgpath']").val(data.imgpath);
					$("input[name='ticketprice']").val(data.ticketprice);
					
					
					$("input[name='director']").val(data.director);
					$("select[name='language'] ").next().find('.layui-input').eq(0).val(data.language);
					$("select[name='vediohall']").next().find('.layui-input').eq(0).val(data.vediohall);
					
					$("input[name='publishdate']").val(data.publishdate);
					
					$("input[name='boxoffice']").val(data.boxoffice);
					$("input[name='ticketprice']").val(data.ticketprice);
					movieAdd.sessionValue = data.session;
					
					
					
					
					
				},'json');
				
			} ,
			
			ajaxSubmit : function (){
				var obj = {}
				 if(!$("input[name='moviename']").val()){
					 this.errMsg = '电影名称不允许为空！';
					 return;
				 }else{
					 obj.moviename = $("input[name='moviename']").val();
				 }
				 obj.director = $("input[name='director']").val();
				 obj.publishdate = $("input[name='publishdate']").val();
				 
				 obj.description = $("input[name='description']").val();
				 obj.imgpath = $("input[name='imgpath']").val();
				 obj.ticketprice = $("input[name='ticketprice']").val();
				 
				obj.time = $("input[name='time']").val();
				obj.language = $("select[name='language'] ").next().find('.layui-input').eq(0).val();
				obj.vediohall = $("select[name='vediohall']").next().find('.layui-input').eq(0).val();
				obj.publishdate = $("input[name='publishdate']").val();
				obj.boxoffice = $("input[name='boxoffice']").val();
				obj.ticketprice = $("input[name='ticketprice']").val();
				obj.session = movieAdd.sessionValue;
				
				if(window.id) obj.id = window.id;
				
				console.log(obj);
				
				//contentType:"application/json", 加上以后修改后台取的全是null
				$.ajax({
		            url:'/movie/add.do',
		            type:'POST',
		            data:obj,
		            dataType:"JSON",
		            async:'true',
		            success:function(data) {
		            	data = JSON.stringify(data);
		            	if(data.code != 0){
							
							if(data.code == -2){
								alert("已经存在该场次的电影！");
								return;
							}
							
							if(data.code < 0){
								alert("后台出错，请联系管理员！");
								return;
							}
							
							
						}
		            	
		            	
						alert('保存成功！');
						location.href="/#/movie/query";
		            }
		        })
		
				
			}
			
			,openDialog2 : function(){
				layer.open({
					  title : "上传图片"
					  ,area: ['400px', '300px']
					  ,shade: 0
					  ,type: 1
					  //,btn: ['确定','取消']
					  //,yes: function(index, layero){
					  //   layer.close(index);
					  //}
					  //,btn2: function(index, layero){
					  //	  layer.close(index);
					  //}
					  ,content: "<iframe style='width:100%;height:90%;overflow:hidden;border:0;' src='/views/movie/file.html' ></iframe>" //这里content是一个普通的String
					}); 
			}
			
			,openDialog1 : function(){
				layer.open({
					  title : "选择场次"
					  ,area: ['600px', '500px']
					  ,shade: 0
					  ,type: 1
					  ,btn: ['确定','取消']
					  ,yes: function(index, layero){
					     var sessionComponent = $('#sessionComponent').val();
						 
					     if(!sessionComponent || ! window.publishdateComponentValue){
					    	 movieAdd.errMsg = "请完善日期和场次！";
					    	 return;
					     }
					     movieAdd.sessionValue = window.publishdateComponentValue + "  场次：" + sessionComponent;
					     
					     layer.close(index);
					  }
					  ,btn2: function(index, layero){
						  layer.close(index);
					  }
					  ,content: $('#getSession') //这里content是一个普通的String
					});
			}
			
			
			,back : function(){
				location.href = "/#/movie/query";
			}
			
			
			
		}
	});
	
	movieAdd.loadData();
	
	//必须要写， 不然select显示不出来！
	/* layui.use('form', function(){
		
	}); */
	
	/* var laydate = layui.laydate;
	
	laydate.render({
	    elem: '#publishdateComponent' //指定元素
    	,done: function(value, date){ //监听日期被切换
	  	  	window.publishdateValue = value;
	  	  }
	  }); */
	
	
	layui.use('form', function(){
        var form = layui.form; 
        form.render();
 }); 
	
	function openUplaod(){
		
	}
  
</script>
<!-- 样式 -->
<style scoped>

</style>



